<template>

  <!-- <button @click="login">点击登录</button> -->

  <div class="big-box">

    <div class="min-box">
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               status-icon
               :rules="rules"
               class="input-style">
        <h1 class="hedar-color">火影自习室</h1>
        <el-form-item prop="admin_account">

          <el-input :prefix-icon="Avatar"
                    v-model="ruleForm.admin_account"
                    type="input"
                    autocomplete="off"
                    placeholder="请输入用户账号" />

        </el-form-item>
        <el-form-item prop="admin_password">
          <el-input :prefix-icon="Lock"
                    v-model="ruleForm.admin_password"
                    type="password"
                    autocomplete="off"
                    placeholder="请输入登录密码" />
        </el-form-item>

        <el-form-item>
          <el-button class="button-login"
                     type="danger"
                     @click="submitForm(ruleFormRef)">登录</el-button>

        </el-form-item>
      </el-form>
    </div>

  </div>

  <!-- 分界线 -->

</template>

<script setup>
import { login } from "../utils/http1"
import { Avatar, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from "../utils/http";
import { ElMessage } from 'element-plus'
const router = useRouter()


const ruleFormRef = ref()
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    if (ruleForm.admin_password !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('admin_password', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  admin_account: '',
  admin_password: '',
})

const rules = reactive({
  admin_account: [{ validator: validatePass, trigger: 'blur' }],
  admin_password: [{ validator: validatePass2, trigger: 'blur' }],

})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('登录')
      console.log(ruleForm);//拿到的数据
      axios({
        method: 'post',
        url: '/login',
        data: {
          ...ruleForm
        }

      }).then(res => {
        console.log(res.data.data.length);
        if (res.data.data.length == 0) {
          ElMessage({
            message: '登录失败，请联系管理员',
            type: 'error',
            center: true,
          })
          return false
        } else {
          ElMessage({
            message: '登录成功!',
            type: 'success',
            center: true,
          })
          sessionStorage.setItem('admin', JSON.stringify(res.data.data[0]));
          router.push('/home')
        }
      })
        .catch(error => console.log(error))

      // login(ruleForm)
      //   .then(data => console.log(data))
      //   .catch(error => console.log(error))
      // router.push('/home')
    }
    // else {
    //   console.log('error submit!')
    //   return false
    // }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}



</script>

<style scoped>
.login-home-style {
  text-align: center;
  color: rgb(26, 188, 156);
  display: flex;
  justify-content: center;
}
.big-box {
  width: 100%;
  height: 500px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.min-box {
  width: 350px;
  height: 350px;
  /* border: 1px solid red; */
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  border-radius: 5%;
}

.button-login {
  width: 240px;
}
.hedar-color {
  color: rgb(204, 0, 51);
}
</style>